Text input

The text input allows you to interact with a string:

use Filament\Forms\Components\TextInput;
 
TextInput::make('name')
use Filament\Forms\Components\TextInput;

TextInput::make('name')

Setting the input type

You may set the type of string using a set of methods. Some, such as email(), also provide validation:

use Filament\Forms\Components\TextInput;
 
TextInput::make('text')
    ->email()
    ->numeric()
    ->password()
    ->tel()
    ->url()
use Filament\Forms\Components\TextInput;

TextInput::make('text')
    ->email()
    ->numeric()
    ->password()
    ->tel()
    ->url()

You may instead use the type() method to pass another HTML input type:

use Filament\Forms\Components\TextInput;
 
TextInput::make('backgroundColor')->type('color')
use Filament\Forms\Components\TextInput;

TextInput::make('backgroundColor')->type('color')

Validation

Length validation

You may limit the length of the input by setting the minLength() and maxLength() methods. These methods add both frontend and backend validation:

use Filament\Forms\Components\TextInput;
 
TextInput::make('name')
    ->minLength(2)
    ->maxLength(255)
use Filament\Forms\Components\TextInput;

TextInput::make('name')
    ->minLength(2)
    ->maxLength(255)

You may also specify the exact length of the input by setting the length(). This method adds both frontend and backend validation:

use Filament\Forms\Components\TextInput;
 
TextInput::make('code')->length(8)
use Filament\Forms\Components\TextInput;

TextInput::make('code')->length(8)

Size validation

In addition, you may validate the minimum and maximum value of the input by setting the minValue() and maxValue() methods:

use Filament\Forms\Components\TextInput;
 
TextInput::make('number')
    ->numeric()
    ->minValue(1)
    ->maxValue(100)
use Filament\Forms\Components\TextInput;

TextInput::make('number')
    ->numeric()
    ->minValue(1)
    ->maxValue(100)

Phone number validation

When using a tel() field, the value will be validated using: /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\.\/0-9]*$/.

If you wish to change that, then you can use the telRegex() method:

use Filament\Forms\Components\TextInput;
 
TextInput::make('phone')
    ->tel()
    ->telRegex('/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\.\/0-9]*$/')
use Filament\Forms\Components\TextInput;

TextInput::make('phone')
    ->tel()
    ->telRegex('/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\.\/0-9]*$/')

Alternatively, to customize the telRegex() across all fields, use a service provider:

use Filament\Forms\Components\TextInput;
 
TextInput::configureUsing(function (TextInput $component): void {
    $component->telRegex('/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\.\/0-9]*$/');
});
use Filament\Forms\Components\TextInput;

TextInput::configureUsing(function (TextInput $component): void {
    $component->telRegex('/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\.\/0-9]*$/');
});

Autocomplete

You may set the autocomplete configuration for the text field using the autocomplete() method:

use Filament\Forms\Components\TextInput;
 
TextInput::make('password')
    ->password()
    ->autocomplete('new-password')
use Filament\Forms\Components\TextInput;

TextInput::make('password')
    ->password()
    ->autocomplete('new-password')

As a shortcut for autocomplete="off", you may disableAutocomplete():

use Filament\Forms\Components\TextInput;
 
TextInput::make('password')
    ->password()
    ->disableAutocomplete()
use Filament\Forms\Components\TextInput;

TextInput::make('password')
    ->password()
    ->disableAutocomplete()

For more complex autocomplete options, text inputs also support datalists.

Datalists

You may specify datalist options for a text input using the datalist() method:

TextInput::make('manufacturer')
    ->datalist([
        'BWM',
        'Ford',
        'Mercedes-Benz',
        'Porsche',
        'Toyota',
        'Tesla',
        'Volkswagen',
    ])
TextInput::make('manufacturer')
    ->datalist([
        'BWM',
        'Ford',
        'Mercedes-Benz',
        'Porsche',
        'Toyota',
        'Tesla',
        'Volkswagen',
    ])

Datalists provide autocomplete options to users when they use a text input. However, these are purely recommendations, and the user is still able to type any value into the input. If you’re looking for strictly predefined options, check out select fields.

Affixes

You may place text before and after the input using the prefix() and suffix() methods:

use Filament\Forms\Components\TextInput;
 
TextInput::make('domain')
    ->url()
    ->prefix('https://')
    ->suffix('.com')
use Filament\Forms\Components\TextInput;

TextInput::make('domain')
    ->url()
    ->prefix('https://')
    ->suffix('.com')

You may place a icon before and after the input using the prefixIcon() and suffixIcon() methods:

use Filament\Forms\Components\TextInput;
 
TextInput::make('domain')
    ->url()
    ->prefixIcon('heroicon-m-arrow-top-right-on-square')
    ->suffixIcon('heroicon-m-arrow-top-right-on-square')
use Filament\Forms\Components\TextInput;

TextInput::make('domain')
    ->url()
    ->prefixIcon('heroicon-m-arrow-top-right-on-square')
    ->suffixIcon('heroicon-m-arrow-top-right-on-square')

You may render an action before and after the input using the prefixAction() and suffixAction() methods:

use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\TextInput;
 
TextInput::make('domain')
    ->suffixAction(fn (?string $state): Action => 
        Action::make('visit')
            ->icon('heroicon-m-arrow-top-right-on-square')
            ->url(
                filled($state) ? "https://{$state}" : null,
                shouldOpenInNewTab: true,
            ),
    )
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\TextInput;

TextInput::make('domain')
    ->suffixAction(fn (?string $state): Action => 
        Action::make('visit')
            ->icon('heroicon-m-arrow-top-right-on-square')
            ->url(
                filled($state) ? "https://{$state}" : null,
                shouldOpenInNewTab: true,
            ),
    )

Input masking

Input masking is the practice of defining a format that the input value must conform to.

In Filament, you may interact with the Mask object in the mask() method to configure your mask:

use Filament\Forms\Components\TextInput;
 
TextInput::make('name')
    ->mask(fn (TextInput\Mask $mask) => $mask->pattern('+{7}(000)000-00-00'))
use Filament\Forms\Components\TextInput;

TextInput::make('name')
    ->mask(fn (TextInput\Mask $mask) => $mask->pattern('+{7}(000)000-00-00'))

Under the hood, masking is powered by imaskjs. The vast majority of its masking features are also available in Filament. Reading their guide first, and then approaching the same task using Filament is probably the easiest option.

You may define and configure a numeric mask to deal with numbers:

use Filament\Forms\Components\TextInput;
 
TextInput::make('number')
    ->numeric()
    ->mask(fn (TextInput\Mask $mask) => $mask
        ->numeric()
        ->decimalPlaces(2) // Set the number of digits after the decimal point.
        ->decimalSeparator(',') // Add a separator for decimal numbers.
        ->integer() // Disallow decimal numbers.
        ->mapToDecimalSeparator([',']) // Map additional characters to the decimal separator.
        ->minValue(1) // Set the minimum value that the number can be.
        ->maxValue(100) // Set the maximum value that the number can be.
        ->normalizeZeros() // Append or remove zeros at the end of the number.
        ->padFractionalZeros() // Pad zeros at the end of the number to always maintain the maximum number of decimal places.
        ->thousandsSeparator(','), // Add a separator for thousands.
    )
use Filament\Forms\Components\TextInput;

TextInput::make('number')
    ->numeric()
    ->mask(fn (TextInput\Mask $mask) => $mask
        ->numeric()
        ->decimalPlaces(2) // Set the number of digits after the decimal point.
        ->decimalSeparator(',') // Add a separator for decimal numbers.
        ->integer() // Disallow decimal numbers.
        ->mapToDecimalSeparator([',']) // Map additional characters to the decimal separator.
        ->minValue(1) // Set the minimum value that the number can be.
        ->maxValue(100) // Set the maximum value that the number can be.
        ->normalizeZeros() // Append or remove zeros at the end of the number.
        ->padFractionalZeros() // Pad zeros at the end of the number to always maintain the maximum number of decimal places.
        ->thousandsSeparator(','), // Add a separator for thousands.
    )

Enum masks limit the options that the user can input:

use Filament\Forms\Components\TextInput;
 
TextInput::make('code')->mask(fn (TextInput\Mask $mask) => $mask->enum(['F1', 'G2', 'H3']))
use Filament\Forms\Components\TextInput;

TextInput::make('code')->mask(fn (TextInput\Mask $mask) => $mask->enum(['F1', 'G2', 'H3']))

Range masks can be used to restrict input to a number range:

use Filament\Forms\Components\TextInput;
 
TextInput::make('code')->mask(fn (TextInput\Mask $mask) => $mask
    ->range()
    ->from(1) // Set the lower limit.
    ->to(100) // Set the upper limit.
    ->maxValue(100), // Pad zeros at the start of smaller numbers.
)
use Filament\Forms\Components\TextInput;

TextInput::make('code')->mask(fn (TextInput\Mask $mask) => $mask
    ->range()
    ->from(1) // Set the lower limit.
    ->to(100) // Set the upper limit.
    ->maxValue(100), // Pad zeros at the start of smaller numbers.
)

In addition to simple pattens, you may also define multiple pattern blocks:

use Filament\Forms\Components\TextInput;
 
TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask
    ->patternBlocks([
        'money' => fn (Mask $mask) => $mask
            ->numeric()
            ->thousandsSeparator(',')
            ->decimalSeparator('.'),
    ])
    ->pattern('$money'),
)
use Filament\Forms\Components\TextInput;

TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask
    ->patternBlocks([
        'money' => fn (Mask $mask) => $mask
            ->numeric()
            ->thousandsSeparator(',')
            ->decimalSeparator('.'),
    ])
    ->pattern('$money'),
)

There is also a money() method that is able to define easier formatting for currency inputs. This example, the symbol prefix is $, there is a , thousands separator, and two decimal places:

use Filament\Forms\Components\TextInput;
 
TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask->money(prefix: '$', thousandsSeparator: ',', decimalPlaces: 2))
use Filament\Forms\Components\TextInput;

TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask->money(prefix: '
<p>You can also control whether the number is signed or not. While the default is to allow both negative and positive numbers, <code>isSigned: false</code> allows only positive numbers:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Forms</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Components</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">TextInput</span><span style="color: #89DDFF;">;</span></div><div class='line'> </div><div class='line'><span style="color: #FFCB6B;">TextInput</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">make</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">cost</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)-></span><span style="color: #82AAFF;">mask</span><span style="color: #89DDFF;">(</span><span style="color: #C792EA;">fn</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">(</span><span style="color: #A6ACCD;">TextInput</span><span style="color: #89DDFF;">\</span><span style="color: #FFCB6B;">Mask</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">mask</span><span style="color: #89DDFF;">)</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">=></span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">mask</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">money</span><span style="color: #89DDFF;">(</span><span style="color: #FFCB6B;">prefix</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">$</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">,</span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">thousandsSeparator</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">,</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">,</span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">decimalPlaces</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #F78C6C;">2</span><span style="color: #89DDFF;">,</span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">isSigned</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">false))</span></div><textarea data-torchlight-original="true" style="display: none !important;">use Filament\Forms\Components\TextInput;

TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask->money(prefix: '<a href="https://github.com/filamentphp/filament/edit/3.x/packages/forms/docs/03-fields/02-text-input.md" class="text-sm" target="_blank" rel="noopener">Edit on GitHub</a><p class="">
              Still need help? Join our <a href="https://filamentphp.com/discord" target="_blank" class="transition hover:text-primary-600">Discord community</a> or open a <a href="https://github.com/filamentphp/filament/discussions/new" target="_blank" class="transition hover:text-primary-600">GitHub discussion</a>
          </p>
</div>
        </article>
        <dl class="mt-12 flex border-t border-gray-200 pt-6 dark:border-gray-800">
          <div>
                <dt class="font-display text-sm font-bold text-gray-900 dark:text-white">
                  Previous
                </dt>
                <dd class="mt-1">
                  <a href="/docs/3.x/forms/fields/getting-started" class="text-base font-semibold text-gray-500 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-300">
                    <span aria-hidden="true">←</span> Getting Started
                  </a>
                </dd>
              </div>
            <div class="ml-auto text-right">
                <dt class="font-display text-sm font-bold text-gray-900 dark:text-white">
                  Next
                </dt>
                <dd class="mt-1">
                  <a href="/docs/3.x/forms/fields/select" class="text-base font-semibold text-gray-500 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-300">
                    Select <span aria-hidden="true">→</span>
                  </a>
                </dd>
              </div>
        </dl>
      </div>
      <div class="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
        <nav aria-labelledby="on-this-page-title" class="mb-9 w-56">
          <h2 id="on-this-page-title" class="font-display text-sm font-bold text-gray-900 dark:text-white">
                  On this page
                </h2><ol role="list" class="mt-4 space-y-3 text-sm" x-data="tableOfContents([{"depth":2,"slug":"setting-the-input-type","text":"Setting the input type","title":"Setting the input type","children":[]},{"depth":2,"slug":"validation","text":"Validation","title":"Validation","children":[{"depth":3,"slug":"length-validation","text":"Length validation","title":"Length validation"},{"depth":3,"slug":"size-validation","text":"Size validation","title":"Size validation"},{"depth":3,"slug":"phone-number-validation","text":"Phone number validation","title":"Phone number validation"}]},{"depth":2,"slug":"autocomplete","text":"Autocomplete","title":"Autocomplete","children":[]},{"depth":2,"slug":"datalists","text":"Datalists","title":"Datalists","children":[]},{"depth":2,"slug":"affixes","text":"Affixes","title":"Affixes","children":[]},{"depth":2,"slug":"input-masking","text":"Input masking","title":"Input masking","children":[]}])" x-on:scroll.window="updateCurrentSection">
                  <li>
                      <h3>
                        <a href="#setting-the-input-type" x-bind:class="current == 'setting-the-input-type' ? 'text-primary-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300'">
                          Setting the input type
                        </a>
                      </h3>
                      
                    </li><li>
                      <h3>
                        <a href="#validation" x-bind:class="current == 'validation' ? 'text-primary-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300'">
                          Validation
                        </a>
                      </h3>
                      <ol role="list" class="mt-2 space-y-3 pl-5 text-gray-500 dark:text-gray-300">
                          <li>
                              <a href="#length-validation" x-bind:class="current == 'length-validation' ? "text-primary-500" : "hover:text-gray-600 dark:hover:text-gray-300"">
                                Length validation
                              </a>
                            </li><li>
                              <a href="#size-validation" x-bind:class="current == 'size-validation' ? "text-primary-500" : "hover:text-gray-600 dark:hover:text-gray-300"">
                                Size validation
                              </a>
                            </li><li>
                              <a href="#phone-number-validation" x-bind:class="current == 'phone-number-validation' ? "text-primary-500" : "hover:text-gray-600 dark:hover:text-gray-300"">
                                Phone number validation
                              </a>
                            </li>
                        </ol>
                    </li><li>
                      <h3>
                        <a href="#autocomplete" x-bind:class="current == 'autocomplete' ? 'text-primary-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300'">
                          Autocomplete
                        </a>
                      </h3>
                      
                    </li><li>
                      <h3>
                        <a href="#datalists" x-bind:class="current == 'datalists' ? 'text-primary-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300'">
                          Datalists
                        </a>
                      </h3>
                      
                    </li><li>
                      <h3>
                        <a href="#affixes" x-bind:class="current == 'affixes' ? 'text-primary-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300'">
                          Affixes
                        </a>
                      </h3>
                      
                    </li><li>
                      <h3>
                        <a href="#input-masking" x-bind:class="current == 'input-masking' ? 'text-primary-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300'">
                          Input masking
                        </a>
                      </h3>
                      
                    </li>
                </ol>
        </nav>
        <div class="w-56">
          <aside class="space-y-8">
  <h4 class="text-center font-display text-xl font-bold text-gray-900 dark:text-white xl:text-left">Sponsors</h4>

  <div class="space-y-4 pb-12">
    <a href="https://ploi.io" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/ploiio.7493f779.png" alt="Ploi" class="block rounded-xl" width="224" height="84" loading="lazy">
    </a>

    <a href="https://codecourse.com" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/codecourse.dde1e810.png" alt="Codecourse" class="block rounded-xl" width="224" height="78" loading="lazy">
    </a>

    <a href="https://devdojo.com" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/devdojo.30600843.png" alt="Devdojo" class="block rounded-xl" width="224" height="82" loading="lazy">
    </a>

    <a href="https://laradir.com" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/laradir.ae00ba7d.png" alt="Laradir" class="block rounded-xl" width="224" height="75" loading="lazy">
    </a>

    <a href="https://uselocale.com" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/locale.ec754b21.png" alt="Locale" class="block rounded-xl" width="224" height="75" loading="lazy">
    </a>

    <a href="https://ego-trace.com" target="__blank" class="mx-auto block max-w-xs rounded-xl bg-white p-4">
      <img src="/docs/assets/egotrace.b88f2ab6.png" alt="EgoTrace" class="block" width="224" height="70" loading="lazy">
    </a>

    <a href="https://flareapp.io" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/flare.4507dd87.png" alt="Flare" class="block rounded-xl" width="224" height="112" loading="lazy">
    </a>

    <a href="https://larasapien.com/?utm_source=filamentphp.com" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/larasapien.7244da4a.png" alt="Larasapien" class="block rounded-xl" width="224" height="113" loading="lazy">
    </a>

    <a href="https://ohdear.app" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/ohdear.6bbc8b39.jpg" alt="Oh Dear" class="block rounded-xl" width="224" height="78" loading="lazy">
    </a>

    <a href="https://github.com/sponsors/danharrin" target="__blank" class="group mx-auto flex max-w-xs items-center justify-center gap-2 rounded-xl bg-gray-50 p-4 text-center text-sm font-bold hover:bg-pink-100 dark:bg-gray-800 dark:text-white dark:hover:bg-pink-900">
      <div>Your logo here?</div>
      <div class="origin-center transition group-hover:scale-125">💖</div>
    </a>
  </div>
</aside>
        </div>
      </div>
    </div>
  </body></html>, thousandsSeparator: ',', decimalPlaces: 2))

You can also control whether the number is signed or not. While the default is to allow both negative and positive numbers, isSigned: false allows only positive numbers:

use Filament\Forms\Components\TextInput;
 
TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask->money(prefix: '$', thousandsSeparator: ',', decimalPlaces: 2, isSigned: false))
use Filament\Forms\Components\TextInput;

TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask->money(prefix: '<a href="https://github.com/filamentphp/filament/edit/3.x/packages/forms/docs/03-fields/02-text-input.md" class="text-sm" target="_blank" rel="noopener">Edit on GitHub</a><p class="">
              Still need help? Join our <a href="https://filamentphp.com/discord" target="_blank" class="transition hover:text-primary-600">Discord community</a> or open a <a href="https://github.com/filamentphp/filament/discussions/new" target="_blank" class="transition hover:text-primary-600">GitHub discussion</a>
          </p>
</div>
        </article>
        <dl class="mt-12 flex border-t border-gray-200 pt-6 dark:border-gray-800">
          <div>
                <dt class="font-display text-sm font-bold text-gray-900 dark:text-white">
                  Previous
                </dt>
                <dd class="mt-1">
                  <a href="/docs/3.x/forms/fields/getting-started" class="text-base font-semibold text-gray-500 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-300">
                    <span aria-hidden="true">←</span> Getting Started
                  </a>
                </dd>
              </div>
            <div class="ml-auto text-right">
                <dt class="font-display text-sm font-bold text-gray-900 dark:text-white">
                  Next
                </dt>
                <dd class="mt-1">
                  <a href="/docs/3.x/forms/fields/select" class="text-base font-semibold text-gray-500 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-300">
                    Select <span aria-hidden="true">→</span>
                  </a>
                </dd>
              </div>
        </dl>
      </div>
      <div class="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
        <nav aria-labelledby="on-this-page-title" class="mb-9 w-56">
          <h2 id="on-this-page-title" class="font-display text-sm font-bold text-gray-900 dark:text-white">
                  On this page
                </h2><ol role="list" class="mt-4 space-y-3 text-sm" x-data="tableOfContents([{"depth":2,"slug":"setting-the-input-type","text":"Setting the input type","title":"Setting the input type","children":[]},{"depth":2,"slug":"validation","text":"Validation","title":"Validation","children":[{"depth":3,"slug":"length-validation","text":"Length validation","title":"Length validation"},{"depth":3,"slug":"size-validation","text":"Size validation","title":"Size validation"},{"depth":3,"slug":"phone-number-validation","text":"Phone number validation","title":"Phone number validation"}]},{"depth":2,"slug":"autocomplete","text":"Autocomplete","title":"Autocomplete","children":[]},{"depth":2,"slug":"datalists","text":"Datalists","title":"Datalists","children":[]},{"depth":2,"slug":"affixes","text":"Affixes","title":"Affixes","children":[]},{"depth":2,"slug":"input-masking","text":"Input masking","title":"Input masking","children":[]}])" x-on:scroll.window="updateCurrentSection">
                  <li>
                      <h3>
                        <a href="#setting-the-input-type" x-bind:class="current == 'setting-the-input-type' ? 'text-primary-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300'">
                          Setting the input type
                        </a>
                      </h3>
                      
                    </li><li>
                      <h3>
                        <a href="#validation" x-bind:class="current == 'validation' ? 'text-primary-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300'">
                          Validation
                        </a>
                      </h3>
                      <ol role="list" class="mt-2 space-y-3 pl-5 text-gray-500 dark:text-gray-300">
                          <li>
                              <a href="#length-validation" x-bind:class="current == 'length-validation' ? "text-primary-500" : "hover:text-gray-600 dark:hover:text-gray-300"">
                                Length validation
                              </a>
                            </li><li>
                              <a href="#size-validation" x-bind:class="current == 'size-validation' ? "text-primary-500" : "hover:text-gray-600 dark:hover:text-gray-300"">
                                Size validation
                              </a>
                            </li><li>
                              <a href="#phone-number-validation" x-bind:class="current == 'phone-number-validation' ? "text-primary-500" : "hover:text-gray-600 dark:hover:text-gray-300"">
                                Phone number validation
                              </a>
                            </li>
                        </ol>
                    </li><li>
                      <h3>
                        <a href="#autocomplete" x-bind:class="current == 'autocomplete' ? 'text-primary-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300'">
                          Autocomplete
                        </a>
                      </h3>
                      
                    </li><li>
                      <h3>
                        <a href="#datalists" x-bind:class="current == 'datalists' ? 'text-primary-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300'">
                          Datalists
                        </a>
                      </h3>
                      
                    </li><li>
                      <h3>
                        <a href="#affixes" x-bind:class="current == 'affixes' ? 'text-primary-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300'">
                          Affixes
                        </a>
                      </h3>
                      
                    </li><li>
                      <h3>
                        <a href="#input-masking" x-bind:class="current == 'input-masking' ? 'text-primary-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300'">
                          Input masking
                        </a>
                      </h3>
                      
                    </li>
                </ol>
        </nav>
        <div class="w-56">
          <aside class="space-y-8">
  <h4 class="text-center font-display text-xl font-bold text-gray-900 dark:text-white xl:text-left">Sponsors</h4>

  <div class="space-y-4 pb-12">
    <a href="https://ploi.io" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/ploiio.7493f779.png" alt="Ploi" class="block rounded-xl" width="224" height="84" loading="lazy">
    </a>

    <a href="https://codecourse.com" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/codecourse.dde1e810.png" alt="Codecourse" class="block rounded-xl" width="224" height="78" loading="lazy">
    </a>

    <a href="https://devdojo.com" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/devdojo.30600843.png" alt="Devdojo" class="block rounded-xl" width="224" height="82" loading="lazy">
    </a>

    <a href="https://laradir.com" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/laradir.ae00ba7d.png" alt="Laradir" class="block rounded-xl" width="224" height="75" loading="lazy">
    </a>

    <a href="https://uselocale.com" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/locale.ec754b21.png" alt="Locale" class="block rounded-xl" width="224" height="75" loading="lazy">
    </a>

    <a href="https://ego-trace.com" target="__blank" class="mx-auto block max-w-xs rounded-xl bg-white p-4">
      <img src="/docs/assets/egotrace.b88f2ab6.png" alt="EgoTrace" class="block" width="224" height="70" loading="lazy">
    </a>

    <a href="https://flareapp.io" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/flare.4507dd87.png" alt="Flare" class="block rounded-xl" width="224" height="112" loading="lazy">
    </a>

    <a href="https://larasapien.com/?utm_source=filamentphp.com" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/larasapien.7244da4a.png" alt="Larasapien" class="block rounded-xl" width="224" height="113" loading="lazy">
    </a>

    <a href="https://ohdear.app" target="__blank" class="mx-auto block max-w-xs">
      <img src="/docs/assets/ohdear.6bbc8b39.jpg" alt="Oh Dear" class="block rounded-xl" width="224" height="78" loading="lazy">
    </a>

    <a href="https://github.com/sponsors/danharrin" target="__blank" class="group mx-auto flex max-w-xs items-center justify-center gap-2 rounded-xl bg-gray-50 p-4 text-center text-sm font-bold hover:bg-pink-100 dark:bg-gray-800 dark:text-white dark:hover:bg-pink-900">
      <div>Your logo here?</div>
      <div class="origin-center transition group-hover:scale-125">💖</div>
    </a>
  </div>
</aside>
        </div>
      </div>
    </div>
  </body></html>, thousandsSeparator: ',', decimalPlaces: 2, isSigned: false))

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion